<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-us" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-us" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-us" class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">var IE7_PNG_SUFFIX = ".png";</script> <![endif]-->
<title>Online JavaScript beautifier</title>
<link rel="icon" href="favicon.png" type="image/png">

<link rel="stylesheet" href="codemirror.css">
<link href="style.css" rel="stylesheet" type="text/css" />


<script src="https://gr-blogtools.googlecode.com/svn/test/beautifier/js/cm-jq.obus.js"></script>
<script src="https://gr-blogtools.googlecode.com/svn/test/beautifier/js/test-unpacks.obus.js"></script>

<!-- urutan asli
<script src="codemirror-ori.js"></script>
<script src="codemirror-javascript.js"></script>
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="beautify-css.js"></script>
<script src="beautify.js"></script>
<script src="beautify-html.js"></script>
<script src="sanitytest.js"></script>
<script src="beautify-test.js"></script>
<script src="javascriptobfuscator_unpacker.js"></script>
<script src="urlencode_unpacker.js"></script>
<script src="p_a_c_k_e_r_unpacker.js"></script>
<script src="myobfuscate_unpacker.js"></script>
-->

<script src="online-coba.js" type="text/javascript"></script>

<!--
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
-->

<style type="text/css">
#holder > div {
	clear: both;
	padding: 2%;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee;
	float: left;
	width: 96%;
}

label {
	display: inline;
}

.regular-checkbox {
	display: none;
}

.regular-checkbox + label {
	background-color: #fafafa; background-color: #000;
	border: 1px solid #cacece;border: 1px solid ;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 7px;
	border-radius: 2px;
	display: inline-block;
	position: relative;margin:0 3px -4px 6px;
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 02px 4px orange, inset -1px 2px 4px yellow;
}
.regular-checkbox:checked + label {
	background-color: #e9ecee; background-color: #000;
	border: 1px solid #adb8c0; border: 1px solid red;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked + label:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: -3px;
	left: 2px;
	color: #99a1a7;
}
select{background:black;color:yellow !important;border:#BCEDEC 1px dotted;padding:0 0 0 4px;margin:4px 0 4px;}
button#submit{background:black;color:#0ff;margin-top:10px !important;margin-left:20px;margin-bottom:5px;width:80px;border:1px solid red;height:80px;border-radius:42px;}
button#submit:focus{color:#f00;box-shadow:0 0 10px orange;}
body{color:#BCEDEC;}




.CodeMirror pre.CodeMirror-cursor {
  z-index: 10;
  position: absolute;
  visibility: hidden;
  border-left: 1px solid black;border-left: 1px solid #fff; /* garis cursor */
  border-right: none;border-right:1px solid lime;
  width: 0;
}
.cm-keymap-fat-cursor pre.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: transparent;
  background: rgba(0, 200, 0, .4);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
}
/* Kludge to turn off filter in ie9+, which also accepts rgba */
.cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id) {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
.CodeMirror-focused pre.CodeMirror-cursor {
  visibility: visible;
}

div.CodeMirror-selected { background: #d9d9d9; background: red;}
.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; background: #006;background:#333;}

.CodeMirror-searching {
  background: #ffa;
  background: rgba(255, 255, 0, .4);background: lime;
}

/*
.CodeMirror-gutter-text {margin-bottom:30px;}

*/

a.highlight{display:inline-block;padding:4px 0;width:110px;background:black;border:1px solid #333;border-radius:4px;font:bold 14px Arial;color:lightyellow;text-align:center;margin-right:10px;}
a.highlight:visited{color:#eee;}a.highlight:hover{color:#0ff;}
a.highlight:focus{color:red;border:1px solid lightyellow;}

</style>

<style>
  .cm-s-default span.cm-keyword {color: #7ff; } /* color:red; text-decoration:blink; */
.cm-s-default span.cm-atom {color: #21f; }
  .cm-s-default span.cm-number {color:#fE6858;}
.cm-s-default span.cm-def {color: lightyellow;}
.cm-s-default span.cm-variable {color: #fff; color: #6cf;}
.cm-s-default span.cm-variable-2 {color: #fca; }
.cm-s-default span.cm-variable-3 {color: #f85; }
.cm-s-default span.cm-property {color: #ccc; }
.cm-s-default span.cm-operator {color: lightgreen;}
.cm-s-default span.cm-comment {color: #777;} /* comments */
.cm-s-default span.cm-string {color: #a1f; color: #cff;} /* ungu cerah */
.cm-s-default span.cm-string-2 {color: #05f; color: #6cf;} /* biru langit */
.cm-s-default span.cm-meta {color: lightblue; }
.cm-s-default span.cm-error {color: #f00; }
.cm-s-default span.cm-qualifier {color: #faa; }
.cm-s-default span.cm-builtin {color: #f0a; }
.cm-s-default span.cm-bracket {color: #cc7; }
.cm-s-default span.cm-tag {color: #f70; color: green;}
.cm-s-default span.cm-attribute {color: #ddd;  }
.cm-s-default span.cm-header {color: lime; }
.cm-s-default span.cm-quote {color: yellow; }
.cm-s-default span.cm-hr {color: #999;}
.cm-s-default span.cm-link {color: #ddd; }
  </style>

</head>
<body>
<!--
http://jsbeautifier.org/jquery/
-->
    <table id="options">
        <tr>
          <td>
          <select name="tabsize" id="tabsize">
            <option value="1">indent with a tab character</option>
            <option value="2">indent with 2 spaces</option>
            <option value="3">indent with 3 spaces</option>
            <option value="4">indent with 4 spaces</option>
            <option value="8">indent with 8 spaces</option>
          </select><br>

          <select id="brace-style">
            <option value="collapse">Braces with control statement</option>
            <option value="expand">Braces on own line</option>
            <option value="end-expand">End braces on own line</option>
            <!-- option value="expand-strict">Braces always on own line (not recommended)</option -->
          </select>

          <p style="margin:6px 0 0 0">HTML &lt;style&gt;, &lt;script&gt; formatting:</p><select id="indent-scripts">
            <option value="keep">Keep indent level of the tag</option>
            <option value="normal">Add one indent level</option>
            <option value="separate">Separate indentation</option>
          </select>

        </td><td>

      <div style="color:#0ff;line-height:22px;">
          <input class="checkbox regular-checkbox" type="checkbox" id="preserve-newlines"/><label for="preserve-newlines"></label> &raquo; <span style="font:normal 14px Arial;">Preserve empty lines?</span><br>
          <input class="checkbox regular-checkbox" type="checkbox" id="detect-packers"/><label for="detect-packers"></label>  &raquo; <span style="font:normal 14px Arial;"> Detect packers and obfuscators?<br>
          <input class="checkbox regular-checkbox" type="checkbox" id="keep-array-indentation"/><label for="keep-array-indentation"></label>  &raquo;  Keep array indentation?<br>
          <input class="checkbox regular-checkbox" type="checkbox" id="space-before-conditional"/><label for="space-before-conditional"></label>  &raquo;  Space before conditional: "if(x)" / "if (x)"<br>
          <input class="checkbox regular-checkbox" type="checkbox" id="unescape-strings"/><label for="unescape-strings"></label>  &raquo;  Unescape printable chars encoded as \xNN or \uNNNN?</span></div>
      <!--    <br><a href="?without-codemirror" class="turn-off-codemirror">Turn off bells and whistles?</a> 
<a href="?gubhugreyot" class="turn-off-codemirror highlight">No Highlighter</a>
<a href="?" class="turn-off-codemirror highlight">Highlight</a>-->
        </td></tr>
    </table>

    <button id="submit" style="margin-top:20px;" title="Klik here for beauty your HTML or javascript"><strong>Beautify</strong> <br/><em>(ctrl-enter)</em></button><br/>
<a href="?gubhugreyot" class="turn-off-codemirror highlight">No-Highlight</a>
<a href="?" class="turn-off-codemirror highlight">Highlight</a><div style="clear:both;"></div>

    <textarea id="source" rows="30" cols="160"></textarea>

    <div class="blurb" style="width:100%;">
      <div style="float:right; width: 10px;height:50px;"><!--
      <a style="display:block; float: left; padding-top: 3px" href="http://flattr.com/thing/94550/jsbeautifier-org" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr" /></a>
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="TL28UJK2ARCUJ">
        <input style="border:0" type="image" src="http://spicausis.lv/misc/paypal-donate.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
      </form>-->
      </div>
<!--
    <p style="text-align:right">
    <a href="#" style="color: #ccc; border-bottom: 1px dashed #ccc; text-decoration: none;" onclick="run_tests(); return false;">Run the tests</a>
    </p>
-->
    <p style="text-align:right">
    <a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a>
    </p>

    </div>
    <div id="testresults"></div>

</body>
</html>

